// 每个数据项
import React from "react";
import {Animated, FlatList, StyleSheet, Text, useColorScheme, View} from 'react-native';
import {ThemedView} from "@/components/ThemedView";
import {useThemeColor} from "@/hooks/useThemeColor";
import {ThemedText} from "@/components/ThemedText";

interface ItemProps {
    item: any; // 你可以根据 item 的结构来替换 any
    scrollX: Animated.Value; // 假设 scrollX 是 Animated.Value
}
export const StockItem: React.FC<ItemProps> = ({item, scrollX}) => {
    return (<ThemedView style={[styles.row]}>
        {/* 左边第一列 */}
        <View style={styles.fixedColumn}>
            <ThemedText style={styles.text} numberOfLines={1}>{item.name}</ThemedText>
            <ThemedText style={styles.text}>{item.id}</ThemedText>
        </View>

        {/* 右边内容，滑动时同步 scrollX */}
        <Animated.ScrollView
            horizontal
            showsHorizontalScrollIndicator={false}
            scrollEventThrottle={16} // 控制滑动事件的触发频率
            onScroll={Animated.event(
                [{nativeEvent: {contentOffset: {x: scrollX}}}],
                {useNativeDriver: false} // 确保滚动在JS端同步
            )}
        >
            <View style={styles.scrollableColumn}>
                <ThemedText style={styles.text}>{item.price}</ThemedText>
                <ThemedText style={[styles.text, item.change < 0 ? styles.redText : styles.greenText]}>
                    {item.change}%
                </ThemedText>
                <ThemedText style={styles.text}>{item.volume}</ThemedText>
                <ThemedText style={styles.text}>{item.extra1}</ThemedText>
                <ThemedText style={styles.text}>{item.extra2}</ThemedText>
                <ThemedText style={styles.text}>{item.extra3}</ThemedText>
            </View>
        </Animated.ScrollView>
    </ThemedView>);
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
        padding: 10,
    },
    row: {
        height: 55,
        flexDirection: 'row',
        borderBottomWidth: 0.5,
        // borderBottomColor: '#ccc',
        alignItems: 'center',
    },
    fixedColumn: {
        width: 120, // 固定列宽度
        alignItems: 'flex-start', // 左对齐
    },
    scrollableColumn: {
        flexDirection: 'row',
        paddingLeft: 10,
    },
    text: {
        fontSize: 15,
        paddingHorizontal: 5,
    },
    redText: {
        color: 'red',
    },
    greenText: {
        color: 'green',
    },
});
